<template>
  <div class="app-container">
    <div class="page-container-title">
      <img src="../../assets/page-title-icon/1.png" alt="">
      <span>会计科目</span>
    </div>
    <div class="filter-container">
      <div class="left-block">
        <span class="label-text">科目编码</span>
        <el-input v-model="searchForm.keyword" style="width: 120px" size="small"/>
        <span class="label-text">科目名称</span>
        <el-input v-model="searchForm.keyword" style="width: 120px" size="small"/>
        <span class="label-text">年份</span>
        <el-select v-model="searchForm.month" style="width: 70px" size="small" class="theme-select">
          <el-option v-for="(item, index) in $MONTH_LIST" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
      </div>
      <div class="right-block">
        <el-button type="primary" size="small" @click="addHandler">新增</el-button>
        <el-button type="primary" size="small">复制</el-button>
        <el-button type="primary" size="small">导入</el-button>
        <el-button type="primary" size="small">导出</el-button>
        <el-button type="primary" size="small">批量启用</el-button>
        <el-button type="primary" size="small">批量禁用</el-button>
        <el-checkbox v-model="noShowCount">显示禁用科目</el-checkbox>
      </div>
    </div>
    <div class="table-title">会计科目</div>
    <el-table
      ref="multipleTable"
      :border="true"
      :data="tableData"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{textAlign: 'center'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        prop="name"
        label="科目编码"/>
      <el-table-column
        prop="name"
        label="科目名称"/>
      <el-table-column
        prop="name"
        label="科目类别"/>
      <el-table-column
        prop="name"
        label="余额方向"/>
      <el-table-column
        prop="name"
        label="辅助核算"/>
      <el-table-column
        prop="name"
        label="数量"/>
      <el-table-column
        prop="name"
        label="状态"/>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="text" @click="editRow(scope.row)">添加下级</el-button>
          <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-pagination">
      <pagination/>
    </div>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'add'?'新增会计科目':'编辑会计科目'">
      <el-form ref="form" :model="addForm" :rules="addRules" label-width="70px">
        <el-form-item label="科目编码" prop="encode">
          <el-input v-model="addForm.encode"/>
        </el-form-item>
        <el-form-item label="科目名称" prop="name">
          <el-input v-model="addForm.name"/>
        </el-form-item>
        <el-form-item label="余额方向" prop="mark">
          <el-radio v-model="addForm.mark" label="1">借</el-radio>
          <el-radio v-model="addForm.mark" label="2">贷</el-radio>
          <el-radio v-model="addForm.mark" label="3">两性</el-radio>
        </el-form-item>
        <el-form-item label="科目特征" prop="type">
          <el-select v-model="addForm.type" class="theme-select">
            <el-option v-for="(item, index) in $VOUCHER_DETAIL_LIST" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-row>
            <el-col :span="4">
              <el-checkbox v-model="noShowCount">辅助核算</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-form-item label="辅助项目" prop="type">
                <el-select v-model="addForm.type" class="theme-select">
                  <el-option v-for="(item, index) in $VOUCHER_DETAIL_LIST" :key="index" :label="item.label" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-row>
            <el-col :span="4">
              <el-checkbox v-model="noShowCount">数量核算</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-form-item label="计量单位" prop="type">
                <el-select v-model="addForm.type" class="theme-select">
                  <el-option v-for="(item, index) in $VOUCHER_DETAIL_LIST" :key="index" :label="item.label" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-row>
            <el-col :span="4">
              <el-checkbox v-model="noShowCount">外币核算</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-form-item label="辅助币别" prop="type">
                <el-select v-model="addForm.type" class="theme-select">
                  <el-option v-for="(item, index) in $VOUCHER_DETAIL_LIST" :key="index" :label="item.label" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="受控系统" prop="type">
          <el-select v-model="addForm.type" class="theme-select">
            <el-option v-for="(item, index) in $VOUCHER_DETAIL_LIST" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="okHandler">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
function createSearchForm(tar) {
  let raw = {
    keyword: '',
    month: '1'
  }
  if (tar) {
    raw = Object.assign(raw, tar)
  }
  return raw
}
function createAddForm(tar) {
  let raw = {
    keyword: '',
    month: '1'
  }
  if (tar) {
    raw = Object.assign(raw, tar)
  }
  return raw
}
export default {
  name: 'AccountSubjects',
  components: { Pagination },
  data() {
    return {
      searchForm: createSearchForm(),
      noShowCount: false,
      dialogVisible: false,
      dialogType: 'add',
      addForm: createAddForm(),
      addRules: {},
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      multipleSelection: []
    }
  },
  component: { Pagination },
  computed: {
  },
  created() {
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow() {

    },
    addHandler() {
      this.addForm = createAddForm()
      this.dialogVisible = true
      this.dialogType = 'add'
    },
    editRow(row) {
      this.addForm = createAddForm(row)
      this.dialogVisible = true
      this.dialogType = 'edit'
    },
    okHandler() {

    },
    multipleDeleteHandler() {
      console.log(this.multipleSelection)
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '至少选择一项'
        })
        return false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
